<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义 shape</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const Shape = F2.Shape;
  Shape.registerShape('interval', 'triangle', {
    getPoints(cfg) {
      const x = cfg.x;
      const y = cfg.y;
      const y0 = cfg.y0;
      const width = cfg.size;
      return [
        { x: x - width / 2, y: y0 },
        { x: x, y: y },
        { x: x + width / 2, y: y0 }
      ]
    },
    draw(cfg, group) {
      const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      const polygon = group.addShape('polygon', {
        attrs: {
          points: [
            { x:points[0].x, y:points[0].y },
            { x:points[1].x, y:points[1].y },
            { x:points[2].x, y:points[2].y }
          ],
          fill: cfg.color
        }
      });
      return polygon; // 将自定义Shape返回
    }
  });

  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 }
  ];

  const chart = new F2.Chart({
    id: 'mountNode',
    width: 400,
    height : 200,
    pixelRatio: window.devicePixelRatio,

  });

  chart.source(data);
  chart.interval().position('genre*sold').color('genre').shape('triangle');
  chart.render();
</script>
</body>
</html>
